<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/assets/lib/layui/css/layui.css">
  <link rel="stylesheet" href="/assets/css/base.css">
  <link rel="stylesheet" href="/assets/css/article/article.css">
</head>

<body>
  <div class="layui-card">
    <div class="layui-card-header">文章列表</div>
    <div class="layui-card-body">
      <!-- 内容区一：表单搜索区 start -->
      <form action="" class="layui-form" id="search">
        <div class="layui-form-item">
          <div class="layui-inline">
            <div class="layui-input-inline" style="width: 200px;">
              <select name="category" lay-verify="">
                <option value="">请选择分类</option>
                <!-- 发送ajax请求，获取真实的分类，然后通过模板引擎渲染到此为止 -->
              </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
              <select name="state" lay-verify="">
                <option value="">请选择状态</option>
                <option value="已发布">已发布</option>
                <option value="草稿">草稿</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <div class="layui-input-inline" style="width: 200px;">
              <button class="layui-btn" lay-submit lay-filter="formDemo">筛选</button>
            </div>
          </div>
        </div>
      </form>
      <!--下拉框end  -->
      <!-- 内容区二：表格区 start -->
      <table class="layui-table">
        <colgroup>
          <!-- 设置列宽 -->
          <col width="40%">
          <col width="15%">
          <col width="15%">
          <col width="15%">
          <col>
        </colgroup>
        <thead>
          <tr>
            <th>文章标题</th>
            <th>分类</th>
            <th>发表时间</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
      <!-- 内容区二：表格区 end -->
      <!-- 分页 start -->
      <div id="page"></div>
      <!-- 分页 end -->

    </div>

    <!-- 文章列表模板 start-->
    <script type="text/html" id='tpl-list'>
    {{each data item}}
    <tr>
      <td>{{item.title}}</td>
      <td>{{item.cate_name}}</td>
      <td>{{item.pub_date}}</td>
      <td>{{item.state}}</td>
      <td>
        <a href ="/article/edit.html?id={{item.Id}}" class="layui-btn layui-btn-xs">编辑</a>
        <button type="button" data-id="{{item.Id}}" class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
      </td>
    </tr>
    {{/each}}
  </script>
    <!-- 文章列表模板 ent-->
    <!-- 下拉框模板 start-->
    <script type="text/html" id="tpl-category">
      {{each data}}
      <option value="{{$value.id}}">{{$value.name}}</option>
      {{/each}}
    </script>
    <!-- 下拉框模板 ent-->
    <script src="/assets/lib/jquery.js"></script>
    <script src="/assets/lib/layui/layui.all.js"></script>
    <script src="/assets/lib/template-web.js"></script>
    <!-- 加载模板引擎js文件 -->
    <script src="/assets/js/common.js"></script>
    <script src="/assets/js/article/article.js"></script>
</body>

</html>